
.m-class{
    .flex;
    align-items: flex-start;
    .m-classleft{
        flex: 1;
        height: 92vh;
        overflow-y: scroll;
        background: #F5F5F5;
        li{
            border-left: 4px solid @background-gray;
            line-height: 3rem;
            text-align: center;
            position: relative;
            &.active{
                background: white;
                border-color: @primary-green;
            }
            i {
              position: absolute;
              z-index: 2;
              top: 17%;
              right: 4%;
              width: 1rem;
              height: 1rem;
              color: white;
              font-size: 0.9rem;
              line-height: 1rem;
              text-align: center;
              border-radius: 50%;
              background: #22D8D4;
            }
        }
    }
    .m-classRight{
        flex: 2;
        background: white;
        padding: 0 .6rem;
        height: 92vh;
        overflow-y: scroll;
        .m-rightTit{
            border-left: 2px solid @primary-green;
            margin: 1rem 0;
            padding-left: .8rem;
            color: @secondary-gray;
        }
    }
}
.m-next {
  width: 100%;
  height: 3.2rem;
  line-height: 3.2rem;
  font-size: 1rem;
  color: white;
  border: none;
  background: #22D8D4;
  position: absolute;
  bottom: 0;
}
.m-page-sure .layout-root {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: #e74c3c
}

.m-page-sure .layout-content {
	color: #fff;
	text-indent: 10px;
	font-weight: 300;
	font-size: 1em;
	line-height: 44px
}

.m-page-sure .layout-content .code {
	text-align: center;
	line-height: 22px
}

.m-page-sure p {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0
}

.m-page-sure a,button {
	outline: 0
}

.m-page-sure .dialog-footer {
	position: fixed;
	top: -26%;
	left: 89%;
	overflow: hidden;
	width: 27pt;
	height: 27pt;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	font-size: 26.5pt;
	line-height: 27pt
}

.m-page-sure button:hover,button:active,button:focus {
	border: none
}

.m-page-sure .dialog-face {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background-color: rgba(50,50,50,.5);
	-webkit-animation-duration: .5s;
	animation-duration: .5s
}

.m-page-sure .dialog-face.slipBottom[opacity="0"] {
	display: none
}

.m-page-sure .dialog-face.slipUp {
	opacity: .7;
	-webkit-animation-name: dialogFaceSlipToUp;
	animation-name: dialogFaceSlipToUp
}

.m-page-sure .dialog-face.slipBottom {
	visibility: hidden;
	opacity: 0;
	-webkit-animation-name: dialogFaceSlipToBottom;
	animation-name: dialogFaceSlipToBottom
}

.m-page-sure .dialog-root {
	position: fixed;
	left: 50%;
	z-index: 2000;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-perspective: 975pt;
	perspective: 975pt
}

.m-page-sure .dialog-root.slipUp {
	top: 50%;
	opacity: 1;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	-webkit-animation-name: dialogSlipToUp;
	animation-name: dialogSlipToUp;
	-ms-transform: translate(-50%,-50%)
}

.m-page-sure .dialog-root.slipBottom {
	top: 100%;
	opacity: .3;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-name: dialogSlipToBottom;
	animation-name: dialogSlipToBottom;
	-ms-transform: translate(-50%,0)
}

.m-page-sure .dialog-wrapper {
	width: 314px;
	border-radius: 17px;
	background: #fff;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-ms-transform-origin: 50% 100%
}

.m-page-sure .dialog-wrapper.slipUp {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	-ms-transform: rotateX(0);
	-webkit-animation-name: contentSlipToUp;
	animation-name: contentSlipToUp
}

.m-page-sure .dialog-wrapper.slipBottom {
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	-webkit-animation-name: contentSlipToBottom;
	animation-name: contentSlipToBottom
}

.m-page-sure .dialog-header {
	height: 37pt;
	border-top-right-radius: 17px;
	border-top-left-radius: 17px;
	background: #22d8d4;
	text-align: center
}

.m-page-sure .dialog-header span {
	color: #fff;
	font-size: 14pt;
	line-height: 37pt
}

.m-page-sure .dialog-content {
	margin: 0;
	padding: 20px;
	color: #fff;
	font-weight: 300;
	font-size: 1.15em
}

.m-page-sure .dialog-content .m-item .item-bd,.m-page-sure .dialog-content .m-item .item-hd {
	display: inline-block;
	padding-top: 3%;
	padding-left: 3%;
	color: #000;
	font-weight: 300;
	font-size: 11.5pt
}

.m-page-sure .dialog-content .m-item .item-bd {
	vertical-align: top
}

.m-page-sure .dialog-content .m-botton {
	margin: 6% 20% 0;
	width: 127.9pt;
	height: 25pt;
	border-radius: 9pt;
	background: #22d8d4;
	color: #fff;
	text-align: center;
	line-height: 25pt
}

.m-page-sure .dialog-content .m-item .item-bd .bd-left {
	float: left
}

@keyframes dialogFaceSlipToUp {
	0% {
		opacity: 0
	}

	to {
		opacity: .7
	}
}

@keyframes dialogFaceSlipToBottom {
	0% {
		visibility: visible;
		opacity: .7
	}

	to {
		visibility: hidden;
		opacity: 0
	}
}

@keyframes dialogSlipToUp {
	0% {
		top: 100%;
		opacity: .3
	}

	to {
		top: 50%;
		opacity: 1
	}
}

@keyframes dialogSlipToBottom {
	0% {
		top: 50%;
		opacity: 1;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%)
	}

	to {
		top: 100%;
		opacity: .3;
		-webkit-transform: translate(-50%,0);
		transform: translate(-50%,0);
		-ms-transform: translate(-50%,0)
	}
}

@keyframes contentSlipToUp {
	0% {
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg);
		-ms-transform: rotateX(90deg)
	}

	to {
		-webkit-transform: rotateX(0);
		transform: rotateX(0);
		-ms-transform: rotateX(0)
	}
}

@keyframes contentSlipToBottom {
	0% {
		-webkit-transform: rotateX(0);
		transform: rotateX(0);
		-ms-transform: rotateX(0)
	}

	60% {
		-webkit-transform: rotateX(60deg);
		transform: rotateX(60deg);
		-ms-transform: rotateX(60deg)
	}

	to {
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg);
		-ms-transform: rotateX(90deg)
	}
}
